<template>
  <table-tool 
    ref="TableToolRef"
    :httpInfo="httpInfo"
    :pageName="pageName"
    :tableConfig="tableConfig"
    :btnConfig="btnConfig"
    :dialogInfo="dialogInfo"
    :rules="rules"
    @setDialogMod="setDialogMod"
  >
    <!-- 搜索框 -->
    <template #searchSlot>
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item prop="name" label="通知名">
          <el-input size="small" v-model="searchInfo.name" placeholder="通知名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetSearch">
            <el-icon class="icon"><elementRefresh/></el-icon> 
            <span class="icon-font">刷新</span>
          </el-button>
          <el-button size="small" type="primary" @click="onSearch">
            <el-icon class="icon"><elementSearch/></el-icon> 
            <span class="icon-font">搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 添加修改框 -->
    <template #dialogSlot>
      <el-form-item label="姓名" prop="name">
        <el-input size="small" v-model="dialogInfo.name" placeholder="请填写姓名" autocomplete="off" clearable></el-input>
      </el-form-item>
			<el-form-item label="工号" prop="pid">
        <el-input size="small" v-model="dialogInfo.pid" placeholder="请填写工号" autocomplete="off" clearable></el-input>
      </el-form-item>
    </template>
  </table-tool>
</template>

<script>
import { reactive, ref } from 'vue';
import TableTool from '/@/components/table/index.vue'
export default {
  components:{
    TableTool,
  },
  setup () {

    const pageName = '通知'

    const searchInfo =  reactive({
      name:'',
      pid:'',
      rid:'',
      did:'',
    })
    const initInfo = {
      id:'',
      name:'',
      pid:'',
      rid:'',
      rname:'',
      rtype:'',
      did:'',
      dname:''
    }

    let rules = ref({
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      pid: [{ required: true, message: '请输入工号', trigger: 'blur' }],
      rid: [{ required: true, message: '请选择角色', trigger: 'blur' }],
      did: [{ required: true, message: '请选择部门', trigger: 'blur' }]
    })
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['edit','del']
    })
    const btnConfig = reactive({
      showAddBtn: true,
      showdeleteBtn: true,
      showImportBtn: true,
      showExportBtn: true,
      fileType: 'apeo', // 下载文件模板类型
      acceptType: '.xls,.xlsx', // 文件类型
      action: '/admin/upload/apeo', // 文件上传地址
      limits: 1, // 上传数量限制
    })
    const httpInfo = reactive({
      listUrl: '/admin/apeo/getList',
      deleteUrl: '/admin/apeo/remove',
      saveUrl: '/admin/apeo/save',
      updateUrl: '/admin/apeo/update',
    })

    const TableToolRef = ref()
    const searchForm = ref()
    let dialogInfo = reactive(initInfo)

    const onSearch = () => { // 搜索
      TableToolRef.value.searchBtn(searchInfo)
    }

    const resetSearch = () => { // 刷新
      searchForm.value.resetFields()
			TableToolRef.value.searchBtn(searchInfo)
    }

    const setDialogMod = (nowInfo) =>{
      if (nowInfo == {}) {
        dialogInfo = initInfo
      }else{
        for (const [key, val] of Object.entries(nowInfo)) { 
          dialogInfo[key] = val
        }
      }
    }


    return{
      dialogInfo,
      rules,
      httpInfo,
      pageName,
      searchInfo,
      TableToolRef,
      searchForm,
      tableConfig,
      btnConfig,
      setDialogMod,
      resetSearch,
      onSearch,
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item{
  vertical-align: top;
}
</style>